import React from 'react';
import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
import Layout from '../components/Layout';
import { ProtectedRoute } from '../components/ProtectedRoute';
import { DashboardPage, DevicePage, UserManagePage, AboutPage, TerminalPage, CustomFlashPage, SettingsPage, ComponentPage, ProfilePage, LoginPage } from '../pages';

const router = createBrowserRouter([
  {
    path: '/login',
    element: <LoginPage />,
  },
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <Layout />
      </ProtectedRoute>
    ),
    children: [
      {
        index: true,
        element: <Navigate to="/profile" replace />,
      },
      {
        path: 'dashboard',
        element: <DashboardPage />,
      },
      {
        path: 'devices',
        element: <DevicePage />,
      },
      {
        path: 'users',
        element: <UserManagePage />,
      },
      {
        path: 'terminal',
        element: <TerminalPage />,
      },
      {
        path: 'custom-flash',
        element: <CustomFlashPage />,
      },
      {
        path: 'settings',
        element: <SettingsPage />,
      },
      {
        path: 'about',
        element: <AboutPage />,
      },
      {
        path: 'components',
        element: <ComponentPage />,
      },
      {
        path: 'profile',
        element: <ProfilePage />,
      },
    ],
  },
], {
  basename: '/esp32-launchpad'
});

export const AppRouter: React.FC = () => {
  return <RouterProvider router={router} />;
};

export default AppRouter;
